<template>
  <div class="tab-content segment-prediction">
    <div class="header-box">
      <BasicTitle :title="titleStr"></BasicTitle>
      <el-radio-group v-model="typeValue" @change="radioChange">
        <el-radio value="1">{{ t('custom.全部') }}</el-radio>
        <el-radio value="2">{{ t('custom.分班') }}</el-radio>
        <el-radio value="3">{{ t('custom.甘特图') }}</el-radio>
        <el-radio value="4">{{ t('custom.历史预测记录') }}</el-radio>
      </el-radio-group>
    </div>
    <div class="tab-all" v-if="typeValue == '1'">
      <BasicVxeTable ref="gridRef" v-bind="gridOption">
        <template #state="{ row }">
          <el-tag effect="dark" :color="zhuanTai.color(Number(row.machineDisplayState))">
            {{ zhuanTai.text(Number(row.machineDisplayState), '细纱') }}
          </el-tag>
        </template>
        <template #operate="{ row }">
          <el-button type="primary" size="small" :icon="Edit" @click="handleRecord(row)">
            {{ t('custom.修改') }}
          </el-button>
        </template>
        <template #tools_left>
          <el-button type="primary" :icon="Fold" @click="handleRecord">
            {{ t('custom.换段记录插入') }}
          </el-button>
          <el-button type="primary" :icon="Operation" @click="changeCoefficient">
            {{ t('custom.调整系数') }}
          </el-button>
          <el-button type="primary" :icon="RefreshRight" @click="handleUpdate">
            {{ t('custom.更新') }}
          </el-button>
        </template>
      </BasicVxeTable>
    </div>
    <div class="tab-banding" v-else-if="typeValue == '2'">
      <BandingSegmentPrediction></BandingSegmentPrediction>
    </div>
    <div class="tab-gantt" v-else-if="typeValue == '3'">
      <div class="gantt-item">
        <el-radio-group v-model="radioValue">
          <el-radio :value="0">{{ t('custom.机台') }}</el-radio>
          <el-radio :value="1">{{ t('custom.紧密程度') }}</el-radio>
        </el-radio-group>
        <div class="legend">
          <el-tag size="small" color="#70d354"> </el-tag>
          {{ t('custom.运行') }}
          <el-tag size="small" color="#ea1a21"> </el-tag>
          {{ t('custom.换段') }}
        </div>
      </div>
      <GanttSegmentPrediction :radioValue="radioValue"></GanttSegmentPrediction>
    </div>
    <div class="tab-prediction" v-else-if="typeValue == '4'">
      <HistoryPredictionRecord :statusCode="statusCode"></HistoryPredictionRecord>
    </div>
  </div>

  <ChangeCoefficientModal @register="registerModal"></ChangeCoefficientModal>
  <OperateSegmentRecordModal @register="registerModalOperate"></OperateSegmentRecordModal>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { useVxeModal } from '@/components/ui/vxe-modal'
  import { zhuanTai } from '@/utils/custom/index'
  import { AllPredictionRowVO } from '../../types'
  import { AllPredictionTableColumns } from '../../data'
  import { Fold, Operation, RefreshRight, Edit } from '@element-plus/icons-vue'
  import { getXiShaHuanDuanYuCe, getZhuangTaiZongLanAndTongJi_xs } from '@/api/shengChanJianShi'

  import OperateSegmentRecordModal from '../../../businessComponents/operateSegmentRecordModal.vue'
  import ChangeCoefficientModal from '../../../businessComponents/changeCoefficientModal.vue'
  import BandingSegmentPrediction from '../../../businessComponents/bandingSegmentPrediction.vue'
  import GanttSegmentPrediction from '../../../businessComponents/ganttSegmentPrediction.vue'
  import HistoryPredictionRecord from '../../../businessComponents/historyPredictionRecord.vue'

  const props = defineProps({
    processName: String,
    statusCode: String
  })

  const { t } = useI18n()
  const machineList = ref<any>([])
  const typeValue = ref('1')
  const radioValue = ref(0)
  const titleStr = ref(t('custom.换段预测报表'))
  const gridRef = ref<BasicGridInstance>()

  // 插入与修改 换段记录
  const [registerModalOperate, modalMethodsOperate] = useVxeModal()
  const handleRecord = (row) => {
    modalMethodsOperate.openModal(true, {
      ...props,
      optionList: machineList.value,
      row
    })
  }

  // 调整系数
  const [registerModal, modalMethods] = useVxeModal()
  const changeCoefficient = () => {
    modalMethods.openModal(true, {
      ...props
    })
  }

  // 更新
  const handleUpdate = () => {
    gridRef.value?.$grid?.commitProxy('query')
  }

  // 单选框切换回调
  const radioChange = (val) => {
    switch (val) {
      case '1':
        titleStr.value = t('custom.换段预测报表')
        gridRef.value?.$grid?.commitProxy('query')
        break
      case '2':
        titleStr.value = t('custom.分班换段预测')
        break
      case '3':
        titleStr.value = t('custom.甘特图')
        break
      case '4':
        titleStr.value = t('custom.历史预测记录')
        break
    }
  }

  // 换段预测报表 -- 全部
  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      isCustom: false,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `machine-detail-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    // maxHeight: 500,
    exportConfig: {
      filename: '数据表'
    },
    height: '100%',
    proxyConfig: {
      autoLoad: false,
      // showLoading: false, // 关闭加载中
      ajax: {
        query: () => {
          // 默认接收 Promise<any[]>
          return getAllPredictionList()
        }
      }
    },
    columns: AllPredictionTableColumns
  })

  const getAllPredictionList = () => {
    return new Promise<AllPredictionRowVO[]>((resolve) => {
      getXiShaHuanDuanYuCe().then((res: any) => {
        resolve(
          res.map((item) => {
            return {
              machineName: item.machineName == null ? '/' : item.machineName,
              machineNo: item.machineNo == null ? '/' : item.machineNo,
              stateCode: item.stateCode == null ? '/' : item.stateCode,
              materialName: item.materialName == null ? '/' : item.materialName,
              changeTime:
                item.changeTime == null ? '/' : dayjs(item.changeTime).format('YYYY-MM-DD HH:mm'),
              predictionChangeTimeNext:
                item.predictionChangeTimeNext == null
                  ? '/'
                  : dayjs(item.predictionChangeTimeNext).format('YYYY-MM-DD HH:mm'),
              fixRationCs: item.fixRationCs == null ? '/' : item.fixRationCs,
              fixLengthCs: item.fixLengthCs == null ? '/' : item.fixLengthCs,
              currentLengthCs: item.currentLengthCs == null ? '/' : item.currentLengthCs,
              spindleSpeed: item.spindleSpeed == null ? '/' : item.spindleSpeed,
              backRollerSpeed: item.backRollerSpeed == null ? '/' : item.backRollerSpeed,
              employeeName: item.employeeName == null ? '/' : item.employeeName,
              machineDisplayState: item.machineDisplayState == null ? '/' : item.machineDisplayState
            }
          })
        )
      })
    })
  }
  const getMachineList = () => {
    getZhuangTaiZongLanAndTongJi_xs().then((res: any) => {
      machineList.value = res.machineOnlineXs
    })
  }

  onMounted(() => {
    gridRef.value?.$grid?.commitProxy('query')
    getMachineList()
  })
</script>
<style scoped lang="scss">
  .segment-prediction {
    position: relative;
    padding: 12px 20px;
    background-color: #fff;
    box-sizing: border-box;

    .header-box {
      display: flex;
      position: absolute;
      top: 20px;
      z-index: 1000;

      .el-radio-group {
        margin-left: 34px;
      }
    }

    .tab-all {
      height: 100%;
    }

    .tab-banding,
    .tab-gantt,
    .tab-prediction {
      margin-top: 48px;
      height: calc(100% - 48px);
      overflow: auto;
    }

    .gantt-item {
      display: flex;
      position: absolute;
      right: 20px;
      top: 20px;

      .legend {
        margin-left: 24px;
        font-size: 14px;
        line-height: 32px;
        color: rgb(0 0 0 / 90%);

        .el-tag {
          width: 24px;
          height: 12px !important;
          margin-right: 6px;
          border-radius: 2px !important;
        }
      }
    }
  }
</style>
